<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 背景属性的简写：
    请为一个名为.compact-background的类使用简写形式设置背景属性，包括颜色、图片、位置和尺寸。

    背景属性的继承：
    请为一个名为.parent的类设置背景颜色，并确保其子元素.child继承该背景颜色。

    背景属性的层叠：
    请为一个名为.layered-background的类设置多个背景层，并使用background-blend-mode属性实现混合效果。

    响应式背景图片：
    请为一个名为.responsive-image的类设置背景图片，并使用媒体查询确保在不同屏幕尺寸下显示不同的背景图片。

    背景属性与伪元素：
    请为一个名为.before-element的类的第一个伪元素::before设置背景图片，并确保伪元素在元素的顶部居中显示。 -->
    <style>
        .compact-background{
            width: 100px;
            height: 100px;
            background:  url(../img/bgimg.png) no-repeat center/center green;
        }
        .parent{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .child{
            background-color: transparent;
        }
        .responsive-image{
            width: 1500px;
            height: 200px;
            background-color: gold;
            }
            /* 最小宽度1000时 */
        @media screen and (min-width: 1000px) {
            .responsive-image{
                background-color: black;
            }
        }
        /* 最小宽度500，最大宽度999时 */
        @media screen and (min-width :500px) and (max-width : 999px) {
            .responsive-image{
                background-color: blueviolet;
            }
        }
        /* 最大宽度499时 */
        @media screen and (max-width : 499px){
            .responsive-image{
                background-color: blue;
            }
        }
    </style>
</head>

<body>
<div>
    <div class="compact-background"></div>
    <div class="parent">
        <div class="child"></div>
    </div>
    <div class="layered-background">能力有限做不到</div>
    <div class="responsive-image"></div>
    <div class="before-element">能力有限做不到</div>
</div>
</body>

</html>